<!--
 * @Author: your name
 * @Date: 2022-01-05 12:17:06
 * @LastEditTime: 2022-01-10 21:10:02
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \project_am-master\am-dashboard\src\pages\m3\components\Bottom2.vue
-->
<template>
  <div ref="bottom2_container" id="container"  style="height: 95%"></div>
</template>
<script>
import { Area } from '@antv/g2plot';
export default {
  data(){
    return{
      dataArr:[
        {
          type:'非本地人口',
          value:182021
        },
        {
          type:'本地人口',
          value:292688
        },
        {
          type:'城市人口',
          value:157618
        },
        {
          type:'农村人口',
          value:317091
        },
      ]
    }
  },
  mounted(){
    this.initChart();
  },
  methods:{
    initChart(){
      const area = new Area(this.$refs.bottom2_container,{
        data:this.dataArr,
         xField: 'type',
        yField: 'value',
      })
      area.render();
    }
  }
  
}
</script>
<style scoped>

</style>